/*底部版权*/
.footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;}
.footer a{color:#586C94;}
.footer__text{padding:0 .34em;font-size:12px;}
.footer_bottom{bottom:.52em;left:0;right:0;}
.footer {color:#999999;font-size:14px;text-align:center;display: block;}
.footer .footer__links{margin-bottom:0;}

.page_preloader{width:100%;height:100%;background-color: #fff;position:absolute;z-index: 9999999;top: 0;left: 0;}
body{margin: 0;overflow: hidden;}

main {
        font-size: 64px;
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
        transform: translate(-65%, -240%)scale(.4);
        display: block;
      }

      heart {
        animation: heart 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
        top: 50%;
        content: '';
        left: 50%;
        position: absolute;
      }

      .heartL {
        animation: heartL 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
        width: 1em;
        height: 1em;
        border: 1px solid #3fc1f2;
        background-color: #3fc1f2;
        content: '';
        position: absolute;
        display: block;
        transform: translate(-29px, -28px);
        border-radius: 100%;
      }

      .heartR {
        animation: heartR 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
        width: 1em;
        height: 1em;
        border: 1px solid #3fc1f2;
        background-color: #3fc1f2;
        content: '';
        position: absolute;
        display: block;
        transform: translate(29px, -28px);
        border-radius: 100%;
      }

      .square {
        animation: square 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
        width: 1em;
        height: 1em;
        border: 1px solid #3fc1f2;
        background-color: #3fc1f2;
        transform: scale(1) rotate(-45deg);
        position: relative;
        display: block;
        content: '';
      }

      shadow {
        animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
        top: 100px;
        left: 50%;
        content: '';
        position: relative;
        display: block;
        bottom: -.5em;
        width: 1em;
        height: .25em;
        border-radius: 50%;
        background-color: #d7d7d7;
        border: 1px solid #d7d7d7;
      }

      @keyframes square {
        50% {
          border-radius: 100%;
          transform: scale(0.5) rotate(-45deg);
        }
        100% {
          transform: scale(1) rotate(-45deg);
        }
      }
      @keyframes heart {
        50% {
          transform: rotate(360deg);
        }
        100% {
          transform: rotate(720deg);
        }
      }
      @keyframes heartL {
        60% {
          transform: scale(0.4);
        }
      }
      @keyframes heartR {
        40% {
          transform: scale(0.4);
        }
      }
      @keyframes shadow {
        50% {
          transform: scale(0.5);
          border-color: #e4e4e4;
        }
      }

/*进度条*/
 #start{ 
  position:absolute; 
  background:#455359; 
  width:80%; 
  height:100%; 
      border-radius: 4px;
      filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
}
 .meter { 
      height: 1rem;  /* Can be anything */
      position: relative;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
 width: 90%;
max-width: 20rem;
margin: 0.25rem auto;

background-size:80% 100%;
border: 1px solid #272727;
overflow: hidden;
box-shadow: rgb(96, 96, 96) 0 0px 1rem -0.05rem;
    }
    .meter > span {
      display: block;
      color: #fff;
      font-size: 1rem;
      padding-right: 0.25rem;
      text-align: right;
      line-height: 1rem;
      height: 100%;
         -webkit-border-top-right-radius: 0.2rem;
      -webkit-border-bottom-right-radius: 0.2rem;
             -moz-border-radius-topright: 0.4rem;
          -moz-border-radius-bottomright: 0.4rem;
                 border-top-right-radius: 0.2rem;
              border-bottom-right-radius: 0.2rem;
          -webkit-border-top-left-radius: 0.2rem;
       -webkit-border-bottom-left-radius: 0.2rem;
              -moz-border-radius-topleft: 1rem;
           -moz-border-radius-bottomleft: 1rem;
                  border-top-left-radius: 0.2rem;
               border-bottom-left-radius: 0.2rem;
      background-color: #3fc1f2;
      background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3e91e6), color-stop(1, #1ba0ff) );
     background-image: -moz-linear-gradient(
        center bottom,
        rgb(43,194,83) 37%,
        rgb(84,240,84) 69%
       );
      -webkit-box-shadow: 
        inset 0 0.1rem 0.45rem  rgba(255,255,255,0.3),
        inset 0 -0.1rem 0.3rem rgba(0,0,0,0.4);
      -moz-box-shadow: 
        inset 0 0.1rem 0.45rem  rgba(255,255,255,0.3),
        inset 0 -0.1rem 0.3rem rgba(0,0,0,0.4);
      box-shadow: 
        inset 0 0.1rem 0.45rem  rgba(255,255,255,0.3),
        inset 0 -0.1rem 0.3rem rgba(0,0,0,0.4);
      position: relative;
      overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
      content: "";
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background-image: 
         -webkit-gradient(linear, 0 0, 100% 100%, 
            color-stop(.25, rgba(255, 255, 255, .2)), 
            color-stop(.25, transparent), color-stop(.5, transparent), 
            color-stop(.5, rgba(255, 255, 255, .2)), 
            color-stop(.75, rgba(255, 255, 255, .2)), 
            color-stop(.75, transparent), to(transparent)
         );
      background-image: 
        -moz-linear-gradient(
          -45deg, 
            rgba(255, 255, 255, .2) 25%, 
            transparent 25%, 
            transparent 50%, 
            rgba(255, 255, 255, .2) 50%, 
            rgba(255, 255, 255, .2) 75%, 
            transparent 75%, 
            transparent
         );
      z-index: 1;
      -webkit-background-size: 2.5rem 2.5rem;
      -moz-background-size: 2.5rem 2.5rem;
      -webkit-animation: move 2s linear infinite;
         -webkit-border-top-right-radius: 0.2rem;
      -webkit-border-bottom-right-radius: 0.2rem;
             -moz-border-radius-topright: 0.4rem;
          -moz-border-radius-bottomright: 0.4rem;
                 border-top-right-radius: 0.2rem;
              border-bottom-right-radius: 0.2rem;
          -webkit-border-top-left-radius: 0.2rem;
       -webkit-border-bottom-left-radius: 0.2rem;
              -moz-border-radius-topleft: 1rem;
           -moz-border-radius-bottomleft: 1rem;
                  border-top-left-radius: 0.2rem;
               border-bottom-left-radius: 0.2rem;
      overflow: hidden;
    }
    
    .animate > span:after {
      display: none;
    }
    
    @-webkit-keyframes move {
        0% {
           background-position: 0 0;
        }
        100% {
           background-position: 2.5rem 2.5rem;
        }
    }
    
    .orange > span {
      background-color: #f1a165;
      background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
      background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
    }
    
    .red > span {
      background-color: #f0a3a3;
      background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
      background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }
    
    .nostripes > span > span, .nostripes > span:after {
      -webkit-animation: none;
      background-image: none;
    }
